<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-过滤器</title>
</head>
<body>
    <div id="app">
        <hello></hello>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/moment.min.js"></script>
<script>
    // 全局过滤器
    // Vue.filter('formatTs', function(value, timeFormat='YYYY-MM-DD'){
    Vue.filter('formatTs', (value, timeFormat='YYYY-MM-DD') => {
        return moment(value).format(timeFormat);
    });


    var app = {
        data(){
            return {
                msg: "hello world",
                ts: new Date(),
            }
        },
        template: `
        <div>
          {{msg | reverse}}
          {{ts | formatTs}}
        </div>
        `,
        filters: {  // 添加过滤器(局部)
            reverse(value){
                console.log('当前值:'+value)
                return value.split('').reverse().join('')
            },
            // formatTs(value, timeFormat='YYYY-MM-DD'){
            //     return moment(value).format(timeFormat);
            // }
        }
    }
    var vm = new Vue({
        el: '#app',
        data(){
            return {

            }
        },
        components: {
            "hello": app,
        }
    });
</script>
</html>